<script type="text/javascript" src="http://127.0.0.1/m2/js/jquery.js"></script>
<script type="text/javascript" src="http://127.0.0.1/m2/js/jquery/jquery-ui-.custom.min.js"></script>

<?php 
	$_helper = Mage::helper('catalog/output');
	$collection = Mage::getResourceModel('catalog/product_collection')
					->addAttributeToSelect('*')
					->addAttributeToSelect('price')
					->setStoreId($storeId)
					->addStoreFilter($storeId)
					->addAttributeToFilter('featured_product', 1);
?>	
<ol class="products-list homepage" id="products-list">
    <?php foreach ($collection as $_product): ?>
		<?php $id = $_product->getId(); ?>
		<div class="main-product">
			<div class="main-image">
			<a class="imgdetail" href="<?php echo $_product->getProductUrl() ?>" >
				<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(400); ?>" width="400" height="400" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
			</a>
			<div class="product-title">WiFi, 6" E link Display</div>
			</div>
			<div class="product-shop pdetail">
				<div class="f-fix">
					<?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
					<h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped; ?>"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a></h2>
					
					<div class="price"><?php echo Mage::helper('checkout')->formatprice($_product->getPrice()); ?></div>
					<?php if($_product->isSaleable()): ?>
						<p><button type="button" title="<?php echo $this->__('Mua ngay') ?>" class="button btn-cart" onclick="setLocation('<?php echo Mage::helper('checkout/cart')->getAddUrl($_product) ?>')"><span><span><?php echo $this->__('Mua ngay') ?></span></span></button></p>
					<?php else: ?>
						<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
					<?php endif; ?>
					<div class="desc std">
						<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
					</div>
				</div>
			</div>
			<div class="pbutton"><a href="<?php echo $_product->getProductUrl() ?>"><span><?php echo $this->__('Xem them')?></span></a></div> 
		</div>
    <?php endforeach; ?>
</ol>
<div class = "clear"></div>
<div class = "preadmore"><?php echo $this->getChildHtml('pdetail') ?></div>
<div class="featured-product">
	<div class="featured-top-left"></div>
	<div class="featured-top-right"></div>
	<div class="featured-content">
	<?php foreach($collection as $_product) : ?>
	<div class="img_hover">
		<?php 
			$a = $_product->getImage();
			$baseUrl = Mage::getBaseUrl('media').'catalog/product'.$a;
			$_img = '<img src="'.Mage::helper('catalog/image')->init($_product, 'image')->resize(200).'"  />';
			echo $_helper->productAttribute($_product, $_img, 'image');
		?>	
		<p><a href="<?php echo $_product->getProductUrl() ?>"><?php echo $_product->getName(); ?></a></p>	
	</div>
	<?php endforeach; ?>
	</div>
	<div class="featured-bottom-left"></div>
	<div class="featured-bottom-right"></div>
</div>

<script type="text/javascript"> 
	jQuery(document).ready(function(){
        var i=1;
        var k=1;
		jQuery('ol#products-list > div:first-child').addClass('active');
		jQuery('ol#products-list > div').addClass('inactive');
        jQuery('ol#products-list > div').each(function(){
            jQuery(this).attr('id','product-feat'+i);
            i++;   
        });
         
        jQuery('.featured-content > div:first-child').addClass('product-active');
         
        jQuery('.featured-content > div').each(function(){
            jQuery(this).attr('title','product-feat'+k);
            k++;
        });
         
        jQuery('div.img_hover').hover(function(){
            jQuery('div.product-active').removeClass('product-active');    
            jQuery(this).addClass('product-active');
            var thisid = jQuery(this).attr('title');
            jQuery('#products-list div.active').removeClass('active');
            jQuery('#'+thisid).addClass('active').fadeIn('slow');  
        });
    });
	
</script>